<template>
	<view>
		<j-cell-group>
			<j-cell :title="$t('General.mine.avatar')" :more="true" @jftap="editHead">
				<view slot="tips">
					<image class="avatar" mode="widthFix" :src="userInfo.headPortrait?userInfo.headPortrait:defaultUrl"></image>
				</view>
			</j-cell>
			<j-cell :title="$t('General.mine.nickname')" :tips="nickname" :more="true"
				@jftap="editNickName">
			</j-cell>
			<j-cell v-if="userId" :title="$t('General.mine.userId')" :more="false" @jftap="jftapCopy">
				<view class="u-f-r" slot="tips" style="padding-right:20rpx;">
					<view class="userId"  style="">{{userId}}</view>
					<uni-icons color="#FF0025" custom-prefix="iconfont" type="icon-xinxi-" size="24"></uni-icons>
				</view>
			</j-cell>
			
			<!-- <j-cell v-if="isWeixinLogin" title="性别" :tips="userInfo.gender==1?'男':userInfo.gender==2?'女':'未知'" :more="false"></j-cell> -->
		</j-cell-group>
		<view class="bottom-fixed">
			<button type="primary" class="block radius-btn" @tap="onBindtapLoginout">{{ $t('General.family.exit') }}</button>
		</view>
		<uni-popup ref="popup" class="popupName" :isMaskClick="false" @maskClick="closePopup">
			<form form-type="submit" @submit="submit">
				<view class="form">
					<view class="u-f-ajc title">{{ $t('General.mine.changeNickname') }}</view>
					<view class="form-item">
						<input :type="'text'" :placeholder="$t('General.mine.nicknamePla')" name="groupName" v-model="name" class="form-control"
							style="background: #f6f6f6" />
					</view>
					<view class="u-f-r form-item">
						<view class="u-f-ajc cancel" @click="closeEditName">{{$t('General.family.cancel')}}</view>
						<!-- <view class="u-f-ajc conf" @click="submit">保存</view> -->
						<button class="u-f-ajc conf" type="primary" form-type="submit">{{$t('General.family.ok')}}</button>
					</view>
				</view>
			</form>
		</uni-popup>
		<uni-popup ref="bottomPopup" class="bottomPopup" type="bottom" @maskClick="maskClick">
			<view class="bottomPopup-content">
				<view class="close" @click="closeBottomPopup">
					<uni-icons type="closeempty" size="30" color="#CFCFCF"></uni-icons>
				</view>
				<view class="headList">
					<view class="headList-item" v-for="(item,index) in HeadPortraitList" :key="index"
						@click="selectHead(item,index)">
						<view class="headList-item-box" :class="selectIndex == index?'itemBorder':''">
							<view class="headList-item-box-te">
								<image mode="widthFix" :src="item" alt=""  />
							</view>
							<uni-icons v-if="selectIndex == index" class='headList-item-icon' type="checkbox-filled"
								color="#FF0025" size="30"></uni-icons>
						</view>
					</view>
				</view>
				<view class="foot-button">
					<button class="block radius-btn" @tap="saveHead()" type="operation">{{ $t('General.mine.use') }}</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const { maskedString,desensitization } = require('@/utils/util.js');
	export default {
		data() {
			return {
				isWeixinLogin: false,
				userInfo: {},
				name: '',
				HeadPortraitList: [],
				selectIndex: 0,
				headUrl: '',
				defaultUrl: 'https://statics.xmcsrv.net/weixin/custom/ThomeLogo.png',
				nickname:'',
				userId:''
			};
		},
		onLoad: function(options) {
			this.isWeixinLogin = uni.getStorageSync('isWeixinLogin');
			this.getSpecialHeadPortrait()
		},
		onShow: function() {
            uni.setNavigationBarTitle({
                title: this.$t('General.home.jlink')
            })
			this.userInfo = uni.getStorageSync('userInfo');
			this.headUrl = this.userInfo.headPortrait  || this.defaultUrl
			this.nickname = this.userInfo.nickname? this.userInfo.nickname : this.userInfo.username ? this.userInfo.username:''
			this.userId = this.userInfo.userId//desensitization(this.userInfo.userId,4,15)
		},
		methods: {
            closePopup() {
                this.$refs.popup.close()
                this.name = ''
            },
			blur(e) {},
			// 打开头像弹窗
			editHead() {
				this.$refs.bottomPopup.open()
			},
			// 选择头像
			selectHead(url, index) {
				this.headUrl = url
				this.selectIndex = index;
			},
			// 保存头像
			saveHead() {
				this.setDefaultHeadPortrait();
				this.updateUserPic();
			},
			// 更新用户信息头像
			setDefaultHeadPortrait() {
				let data = {
					defaultUrl: this.headUrl,
					userId: this.userInfo.userId
				}
				getApp().globalData.api.setDefaultHeadPortrait(data, (res) => {
					this.userInfo.headPortrait = this.headUrl;
					this.$forceUpdate();
					let userInfo = uni.getStorageSync('userInfo')
					userInfo.headPortrait = this.headUrl
					uni.setStorageSync('userInfo', userInfo);
					this.closeBottomPopup();
					uni.showToast({
						title: this.$t('General.mine.changeAvatar')
					})
				});
			},
			// 更新家庭用户头像
			updateUserPic() {
				let data = {
					userPic: this.headUrl
				}
				getApp().globalData.api.updateUserPic(data, (res) => {})
			},
			maskClick() {
				this.closeBottomPopup()
			},
			// 关闭弹窗
			closeBottomPopup() {
				this.$refs.bottomPopup.close();
				setTimeout(() => {
					let index = 0
					if (this.userInfo.headPortrait) {
						index = this.HeadPortraitList.findIndex((item) => item == this.userInfo.headPortrait)
					}
					this.selectIndex = index;
				}, 500)
			},
			closeEditName() {
				this.$refs.popup.close()
			},
			// 获取头像列表
			getSpecialHeadPortrait(e) {
				let data = {}
				getApp().globalData.api.getSpecialHeadPortrait(data, (res) => {
					this.HeadPortraitList = res;
					let index = 0
					if (this.userInfo.headPortrait) {
						index = this.HeadPortraitList.findIndex((item) => item == this.userInfo.headPortrait)
					}
					if(this.HeadPortraitList.length>0){
						this.HeadPortraitList[0] = this.defaultUrl
					}
					this.selectIndex = index;
				})
			},
			//修改昵称
			editNickName() {
				this.name = this.userInfo.nickname || this.userInfo.username
				this.$refs.popup.open()
			},
			// 空格校验
			isNull(str) {
				if (str == "") return true;
				var regu = "^[ ]+$";
				var re = new RegExp(regu);
				return re.test(str);
			},
			// emoji表情校验
			handleInput(e) {
				let value = e
				value = value.replace(
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig,
					'')
				value = value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
				value = value.replace(/[\uE000-\uF8FF]/g, '');
				if (value != this.name) {
					return true
				}
			},
			// 确定修改昵称
			submit(e) {
				console.log(e, 'weixin')
				if (!this.name) {
					return uni.showToast({
						title: this.$t('General.mine.nicknamePla'),
						icon: "none"
					})
				}
				if (this.isNull(this.name)) {
					return uni.showToast({
						title: this.$t('General.mine.nicknamePla2'),
						icon: "none"
					})
				}
				if (this.handleInput(this.name)) {
					return uni.showToast({
						title: this.$t('General.mine.nicknamePla3'),
						icon: "none",
						duration: 2000
					})
				}
				// if (this.isWeixinLogin) {
				// 	let groupName = e.detail.value.groupName
				// 	if (groupName.length > 50 || groupName.length < 2) {
				// 		return uni.showToast({
				// 			title: '昵称不符合规范(名字长度2-50个字符)',
				// 			icon: "none",
				// 			duration: 2000
				// 		})
				// 	}
				// 	this.userInfo.nickname = groupName
				// 	this.modifyAccountNickname(groupName)
				// } else {
				if (this.name.length > 50 || this.name.length < 2) {
					return uni.showToast({
						title: this.$t('General.family.msg2'),
						icon: "none",
						duration: 2000
					})
				}
				this.userInfo.nickname = this.name
				this.modifyAccountNickname(this.name)
				// }
				this.$refs.popup.close()
			},
			// 保存修改名称
			modifyAccountNickname(e) {
				console.log(e)
				let data = {
					"nickname": e,
				};
				getApp().globalData.api.modifyAccountNickname(data, (res) => {
					this.nickname = this.name
					let info = uni.getStorageSync('userInfo');
					info.nickname = e;
					this.userInfo.nickname = this.name
					uni.setStorageSync('userInfo', info)
				})
			},
			// 复制用户id
			jftapCopy() {
				uni.setClipboardData({
					data: this.userInfo.userId,
					success: function() {
						// console.log('success');
					}
				})
			},
			// 退出
			onBindtapLoginout() {
				uni.showModal({
					title: this.$t('General.mine.exit'),
					content: this.$t('General.mine.exitMsg'),
					success(res) {
						if (res.confirm) {
							uni.removeStorageSync('accessToken');
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('checkAutoLogin');
							uni.removeStorageSync("VMSPUBLICKKEY");
							uni.removeStorageSync("VMSATOKEN");
							uni.removeStorageSync("VMSKEY");
							uni.removeStorageSync('devListVal')
							uni.removeStorageSync('currentGroupId')
							uni.removeStorageSync('groupList')
							uni.removeStorageSync('openId')
                            uni.removeStorageSync('readStatus')
							if (getApp().globalData.mqtt.client) {
								getApp().globalData.mqtt.close()
							}
							uni.reLaunch({
								url: '/jvss/pages/login/login'
							});
						} else if (res.cancel) {}
					}
				});
			},
		}
	};
</script>
<style lang="scss">
	.popupName {
		/deep/ .uni-popup__wrapper {
			top: -100rpx;
		}
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
	}
	.userId{
		color: #999999;
		font-size: 24rpx;
		width: 400rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.userinfo-avatar {
		overflow: hidden;
	}

	.form {
		background: white;
		padding: 60rpx;
		border-radius: 10rpx;
	}

	.form .form-item {
		margin-top: 20rpx;

		.cancel {
			background: #F6F7FB;
			color: #000000;
			font-size: 30rpx;
			width: 237rpx;
			height: 84rpx;
			border-radius: 42rpx;
		}

		.conf {
			margin-left: 20rpx;
			background: #FF0025;
			color: #ffffff;
			font-size: 30rpx;
			width: 237rpx;
			height: 84rpx;
			border-radius: 42rpx;
		}
	}

	.form .form-title {
		text-align: center;
		margin-bottom: 40rpx;
		font-weight: bold;
	}

	.form .form-item .form-control {
		background: #efefef;
		border: none;
		box-sizing: border-box;
		width: 100%;
	}

	.headList {
		display: grid;
		justify-content: space-around;
		grid-template-columns: repeat(auto-fill, 100px);
		grid-auto-rows: 100px;
		grid-gap: 10px;
		padding: 30rpx 0;
		height: calc(66vh - 100px);
		overflow-y: scroll;

		.headList-item {
			margin-top: 50rpx;
			width: 100px;

			.headList-item-box {
				position: relative;
				margin: auto;
				width: 75px;
				height: 75px;
				
			}
            .headList-item-box-te{
				width: 75px;
				height: 75px;
				border-radius: 50%;
				overflow: hidden;
				display: flex;
				flex: 1;
				align-items: center;
			}
			.itemBorder {
				border: 3rpx solid #FF0025;
				border-radius: 50%;
			}

			image {
				width: 75px;
				height: 75px;
				box-sizing: border-box;
			}

			.headList-item-icon {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}
	}

	.foot-button {
		bottom: 50rpx;
		left: 0;
	}

	/deep/.bottomPopup {
		.vue-ref {
			padding-bottom: 0 !important;
		}
	}

	.bottomPopup-content {
		padding: 15px;
		height: 66vh;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		position: relative;

		.img2 {
			width: 130rpx;
			height: 130rpx;
			margin-bottom: 20rpx;
		}

		.close {
			position: absolute;
			top: 10rpx;
			right: 20rpx;
		}
	}
</style>
